<template>
  <div class="bg-white rounded-lg p-5 h-full flex flex-col">
    <div class="font-bold text-lg mb-4">紫外线灯擦拭记录</div>
    <div>
    <div class="rounded border   p-3 shadow mb-4 inline-flex flex-col">
      <div class="font-bold">{{ count }}</div>
      <div>未擦拭次数</div>
    </div>
    <el-form :inline="true" :model="queryForm" ref="queryForm" size="small">
      <el-form-item prop="dateRange">
        <el-date-picker
          v-model="queryForm.dateRange"
          type="daterange"
          :clearable="false"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div>
      <el-button type="primary" @click="search">查询</el-button>
      <el-button @click="reset">重置</el-button>
      <el-button @click="search">导出</el-button>
    </div>

    <el-table class="mt-4" :data="dataList" border>
      <el-table-column type="index" label="序号" width="55" align="center">
      </el-table-column>

      <el-table-column prop="position" label="紫外线灯设备位置名称">
      </el-table-column>
      <el-table-column prop="scrubTime" label="擦拭日期"> </el-table-column>
      <el-table-column prop="scrubStatus" label="擦拭状态">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.disinfect_device_operate_status"
            :value="scope.row.scrubStatus"
          />
        </template>
      </el-table-column>

      <el-table-column prop="scrubUrl" label="擦拭照片"> </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 10px; text-align: right"
      :pageSize="pageSize"
      layout="prev, pager, next"
      :page-sizes="[10, 20, 50]"
      background
      :total="total"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
    >
    </el-pagination>
  </div>
    <hr class="mt-auto mb-4" />
    <div class="flex justify-end">
      <el-button type="primary" @click="goBack">返回</el-button>
    </div>
  </div>
</template>

<script>
import {
  getUrRubListAPI,
  getUrRubCountAPI,
} from "@/api/zhangping/equipment-manage";

export default {
  dicts: ["disinfect_device_operate_status"],
  data() {
    return {
      value1: "",
      formData: {
        pageNum: 1,
        pageSize: 10,
        creditCode: null,
        params: {
          beginScrubTime: null,
          endScrubTime: null,
        },
      },
      queryForm: {
        dateRange: null,
      },

      dataList: [],
      pageSize: 10,
      total: 1000,
      count: 0,
      titleName: null,
    };
  },
  mounted() {
    this.getDataList();
    this.getCount();
  },
  methods: {
    handleCurrentChange() {},
    handleSizeChange() {},
    reset() {
      this.$refs.queryForm.resetFields();
      this.queryForm = {
        dateRange: null, 
      }
      this.search();
    },
    async() {},
    search() {
      this.formData.pageNum = 1;
      this.getDataList();
    },
    goBack() {
      this.$router.back();
    },
    getCount() {
      getUrRubCountAPI({}).then((res) => {
        this.count = res.data;
      });
    },
    getDataList() {
      this.loading = true;
      console.log(this.queryForm);
      const { dateRange } = this.queryForm;
      this.formData.params.beginScrubTime = dateRange?dateRange[0]:null;
      this.formData.params.endScrubTime = dateRange?dateRange[1]:null;
      getUrRubListAPI(this.formData)
        .then((res) => {
          this.dataList = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped></style>
